<template>
  <div class="content">
    <el-table
      :data="tableData"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center', padding: '7px' }"
      :row-class-name="tableRowClassName"
      v-loading="loading"
    >
      <el-table-column label="站点" prop="sensorNum">
        <template slot-scope="scope">
          <span v-if="scope.row.sensorNum === 'YS0334101'">UP1</span>
          <span v-if="scope.row.sensorNum === 'YS0334102'">UP2</span>
          <span v-if="scope.row.sensorNum === 'YS0334103'">UP3</span>
          <span v-if="scope.row.sensorNum === 'YS0334104'">UP4</span>
          <span v-if="scope.row.sensorNum === 'YS0334105'">UP5</span>
          <span v-if="scope.row.sensorNum === 'YS0334106'">UP6</span>
          <span v-if="scope.row.sensorNum === 'YS0334107'">UP7-1</span>
          <span v-if="scope.row.sensorNum === 'YS0334108'">UP7-2</span>
          <span v-if="scope.row.sensorNum === 'YS0334109'">UP7-3</span>
          <span v-if="scope.row.sensorNum === 'YS0334110'">UP7-4</span>
          <span v-if="scope.row.sensorNum === 'YS0334111'">UP7-5</span>
          <span v-if="scope.row.sensorNum === 'YS0334112'">UP8</span>
          <span v-if="scope.row.sensorNum === 'YS0334113'">UP9</span>
          <span v-if="scope.row.sensorNum === 'YS0334301'">UP10</span>
          <span v-if="scope.row.sensorNum === 'YS0334302'">UP11</span>
          <span v-if="scope.row.sensorNum === 'YS0334303'">UP12</span>
          <span v-if="scope.row.sensorNum === 'YS0334304'">UP13-1</span>
          <span v-if="scope.row.sensorNum === 'YS0334305'">UP13-2</span>
          <span v-if="scope.row.sensorNum === 'YS0334306'">UP13-3</span>
          <span v-if="scope.row.sensorNum === 'YS0334307'">UP13-4</span>
          <span v-if="scope.row.sensorNum === 'YS0334308'">UP13-5</span>
          <span v-if="scope.row.sensorNum === 'YS0334201'">UP14</span>
          <span v-if="scope.row.sensorNum === 'YS0334202'">UP15</span>
          <span v-if="scope.row.sensorNum === 'YS0334203'">UP16</span>
          <span v-if="scope.row.sensorNum === 'YS0334204'">UP17</span>
          <span v-if="scope.row.sensorNum === 'YS0334205'">UP18-1</span>
          <span v-if="scope.row.sensorNum === 'YS0334206'">UP18-2</span>
          <span v-if="scope.row.sensorNum === 'YS0334207'">UP18-3</span>
          <span v-if="scope.row.sensorNum === 'YS0334208'">UP18-4</span>
          <span v-if="scope.row.sensorNum === 'YS0334209'">UP18-5</span>
          <span v-if="scope.row.sensorNum === 'YS0334210'">UP19</span>
          <span v-if="scope.row.sensorNum === 'YS0334211'">UP20</span>
          <span v-if="scope.row.sensorNum === 'YS0334212'">UP21</span>
        </template>
      </el-table-column>
      <el-table-column label="监测类型" prop="dataType"></el-table-column>
      <el-table-column label="压强(kPa)" prop="realData"></el-table-column>
      <el-table-column
        label="水位高程(m)"
        prop="nozzleHeight"
      ></el-table-column>
      <el-table-column label="采集时间" prop="creatTime"></el-table-column>
    </el-table>
    <el-button @click="realTimeCollecting()" size="small" type="primary"
      >实时采集</el-button
    >
    <p class="pStyle">南京中网卫星通信股份有限公司</p>
  </div>
</template>

<script>
import Axios from "axios";
import moment from "moment";
import * as serviceApi from "../../../../common/service.config";
Axios.defaults.withcredentials = true;

export default {
  name: "DeepAndCrack",
  props: {
    node: Object,
  },
  data() {
    return {
      tableData: null,
      loading: null,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"dataType\\":\\"01\\",\\"sensorName\\":\\"${this.node.sensorName}\\"}","serviceCode":"queryRealDataBySensorNo","timestamp":"","uuid":""}`,
      }).then((res) => {
        this.loading = false;
        let list = res.data.parameter;
        for (let i = 0; i < list.length; i++) {
          list[i].creatTime = moment(Number(list[i].creatTime)).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          switch (list[i].dataType) {
            case "01":
              list[i].dataType = "测斜";
              list[i].realData = Number(list[i].realData).toFixed(3);
              break;
            case "02":
              list[i].dataType = "裂缝";
              list[i].realData = Number(list[i].realData).toFixed(1);
            case "03":
              list[i].dataType = "渗压";
              list[i].realData = Number(list[i].realData).toFixed(3);
              list[i].nozzleHeight = Number(list[i].nozzleHeight).toFixed(3);
          }
        }
        this.tableData = list;
      });
      this.loading = false;
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "row01";
      } else {
        return "row02";
      }
    },
    realTimeCollecting() {
      this.loading = true;
      Axios({
        url: serviceApi.KB_API,
        method: "post",
        data: `appMsg={"parameter":"{\\"sensorNumber\\":\\"${this.node.sensorNumber}\\",\\"dataType\\":\\"01\\",\\"sensorName\\":\\"${this.node.sensorName}\\"}","serviceCode":"callingForRealData","timestamp":"","uuid":""}`,
      }).then((res) => {
        console.log(res);
        if (res.data.resultcode == "0000") {
          this.$message({
            message: "成功采集",
            type: "success",
            duration: 1000,
            onClose: () => {
              this.getList();
            },
          });
        } else {
          this.$message({
            message: "采集失败",
            type: "error",
            duration: 1000,
            onClose: () => {
              this.getList();
            },
          });
        }
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  height: 92vh;
  position: relative;
  .pStyle {
    position: absolute;
    bottom: 1%;
    right: 2%;
  }
  .el-table {
    /deep/ .row01 {
      background: #ffbab7;
    }
    /deep/ .row02 {
      background: #c7efcf;
    }
  }
  .el-button {
    margin: 2.05rem 50rem;
  }
}
</style>